{% extends 'base_courses.html' %}

{% block top_content %}

    <div class="gcb-cols">
      <div class="gcb-col-11 gcb-aside">
        <div class="gcb-col-55">
          <h1 class="product-headers">{{ site.sitename }}</h1>
          <h2 class="product-headers">{{  site.site_description }}</h2>
          <h2 class="bio-headers">{{  site.course_leader }}</h2>
        </div>
        {% if site.video_introduction %}
        <div class="gcb-col-5 gcb_a_editable_video"> {# TODO #}
          <iframe width="460" height="300" src="{{ site.video_introduction }}"
            frameborder="0" allowfullscreen></iframe>
        </div>
        {% elif site.banner_image %}
         <div class="gcb-col-5">
          <img height="300" src="{{ site.banner_image }}" class="gcb_a_editable_image"> {# TODO #}
        </div>
        {% endif %}
      </div>
    </div>

    <div style="margin-top: 20px;" class="gcb-cols">
      <div class="gcb-col-1">
		   <a href="javascript:void(0);" class="gcb_a_open_dialog gcb_a_control"   style="display: none;"  gcb-a-dialog="gcb_a_add_course_dialog" >Add New Course</a>
      </div>
      <div class="gcb-col-9">

		{% if registered %}
        <h1 class="schedule-headers">Registered Courses</h1>
        <div class="gcb-main">
          <div style="width: 100%;" class="gcb-nav" id="gcb-nav-y">
            <ul>
	      {% for course in courses %}
	      	{% if course.coursecode in registered %}
               <li><p class="top_content"><a href="/{{ course.coursecode }}" class="gcb_a_editable" gcb-a-action="/editor/{{ course.coursecode }}/course/coursename/" >{{ course.coursename }}</a></p></li>
            {% endif %}
	      {% endfor %}
            </ul>
          </div>
        </div>
		{% endif %}
        <h1 class="schedule-headers">Courses Available</h1>
        <div class="gcb-main">
          <div style="width: 100%;" class="gcb-nav" id="gcb-nav-y">
            <ul id="gcb_available_courses">
	      {% for course in courses %}
	      	{% if course.coursecode not in registered %}
               <li><p class="top_content"><a href="/{{ course.coursecode }}/register" class="gcb_a_editable" gcb-a-action="/editor/{{ course.coursecode }}/course/coursename/" >{{ course.coursename }}</a></p></li>
            {% endif %}
	      {% endfor %}
            </ul>
          </div>
          
        </div>
        

      </div>
    </div>
    <style type="text/css">
    </style>
    <div class="gcb_q_hidden gcb_a_control_container" >
	    <div class="gcb_q_hidden gcb_a_dialog" id="gcb_a_add_course_dialog" title="New Course Details" width="700px">
	       {% include "fragments/mini-course-editor.html" with context %}
	    </div>
	   <span class="gcb_a_template" gcb-a-action="/edtior/newcourse" gcb-a-target="gcb_available_courses"  gcb-a-template="gcb_add_new_course"  />
    </div>
    
    <script id="gcb_add_new_course" type="text/x-jsrender">
	   <li><p class="top_content"><a href="/${ coursecode }/register" class="gcb_a_editable" gcb-a-action="/editor/${ coursecode }/course/coursename/" >${ coursename }</a></p></li></span>
    </script>

    

{% endblock %}

{% block main_content %}

  
{% endblock %}
